<template>
  <div>
    <van-row class="u-header">
      <van-col span="1" offset="1">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="18">
        <span>账户安全</span>
      </van-col>
      <van-col span="4">
        <van-popover v-model="showPopover" trigger="click" :actions="actions"  theme="dark"
         placement="bottom-end">
          <template #reference>
              <van-icon name="ellipsis"/>
          </template>
        </van-popover>
      </van-col>
    </van-row>
    <van-form validate-first @failed="onFailed">
  <!-- 通过 pattern 进行正则校验 -->
  <van-field class="v-inp"
    v-model="value1"
    label="原密码"
    name="pattern"
    placeholder="请输入原密码"
    :rules="[{ pattern, message: '请输入正确内容' }]"
  />
  <!-- 通过 validator 进行函数校验 -->
  <van-field class="v-inp"
    v-model="value2"
    label="新密码"
    name="validator"
    placeholder="请输入新密码"
    :rules="[{ validator, message: '请输入正确内容' }]"
  />
  <!-- 通过 validator 进行异步函数校验 -->
  <van-field class="v-inp"
    v-model="value3"
    label="确认密码"
    name="asyncValidator"
    placeholder="请再次输入新密码"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" class="v-btn">确认修改</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { Icon, Col, Row, Popover, Button,Form , Field, Toast  } from "vant";
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分类", icon: "qr" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "会员中心", icon: "friends-o" },
      ],
      value1: '',
      value2: '',
      value3: '',
      pattern: /\d{6}/,
    };
  },
  components: {
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row,
    [Popover.name]: Popover,
    [Button.name]: Button,
    [Field.name]: Field,
    [Form.name]:Form,
    [Toast.name]:Toast 
  },
    methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');
        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
  },
};

</script>

<style scoped>
.u-header {
  text-align: center;
  height: 3rem;
  color: black;
  line-height: 3rem;
  font-size: 1.1rem;
  background: #f5f5f5;
}
.v-inp{
    /* background: green; */
    border-bottom: .1rem solid skyblue;
    font-size: .8rem;
    padding-top: 1rem;
    width: 96%;
    margin-left: .4rem;
}
.v-btn{
    border-radius: .15rem;
     font-size: .8rem;
     display: block;
     padding: 1rem;
}
</style>